<template>
  <div id="theme">
    <div class="switcher" :class="theme" @click="toggleTheme">
      <i class="iconfont" :class="themeIcon"></i>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
import { useEnhandle } from "@/enhandle";
export default defineComponent({
  name: 'Theme',
  setup() {
    const { theme } = useEnhandle()
    const themeValue = theme.theme
    const themeIcon = computed(() => {
      const themeIconMap = {
        default: "icon-taiyang",
        dark: "icon-yueliang",
      }
      return themeIconMap[themeValue.value]
    })

    const toggleTheme = () => {
      theme.toggle()
    }

    return {
      theme: themeValue,
      themeIcon,
      toggleTheme
    }
  }
})
</script>

<style lang="scss" scoped>
#theme {
  position: fixed;
  right: 0;
  top: 20%;

  .switcher {
    // $size: $lg-gap * 2;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: $module-bg;
    border-left: $xs-gap solid $primary;
    // border-top-left-radius: $xs-radius;
    color: $primary;
    opacity: 0.4;
    cursor: pointer;
    // @include visibility-transition();
    &:hover {
      opacity: 1;
    }
  }
}
</style>
